<template>
  <div class="min-h-screen bg-purple-50 py-8 px-4">
    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
      <div class="p-6">
        <!-- 出生信息表单 -->
        <BirthForm @calculate="calculateChart" />
        
        <!-- 加载中提示 -->
        <div v-if="isLoading" class="text-center py-8">
          <div class="inline-block w-8 h-8 border-4 border-purple-200 border-t-purple-700 rounded-full animate-spin"></div>
          <p class="mt-2 text-purple-800 font-medium">命盘计算中，请稍候...</p>
        </div>
        
        <!-- 命盘展示 -->
        <ChartDisplay 
          v-if="chartData && !isLoading" 
          :chartData="chartData" 
          :userInfo="userInfo" 
        />
      </div>
    </div>
  </div>
</template>

<script>
import BirthForm from './components/BirthForm.vue';
import ChartDisplay from './components/ChartDisplay.vue';
import { calculateZiWeiChart } from './utils/ziwei';

export default {
  name: 'App',
  components: {
    BirthForm,
    ChartDisplay
  },
  data() {
    return {
      chartData: null,
      userInfo: null,
      isLoading: false
    };
  },
  methods: {
    calculateChart(formData) {
      this.isLoading = true;
      
      // 模拟计算延迟，实际应用中可以去掉
      setTimeout(() => {
        // 计算紫微斗数命盘
        this.chartData = calculateZiWeiChart(
          formData.name,
          formData.gender,
          formData.birthYear,
          formData.birthMonth,
          formData.birthDay,
          formData.birthHour,
          formData.birthSystem,
          formData.currentYear
        );
        
        // 保存用户信息
        this.userInfo = {
          name: formData.name,
          gender: formData.gender,
          birthYear: formData.birthYear,
          birthMonth: formData.birthMonth,
          birthDay: formData.birthDay,
          birthHour: formData.birthHour,
          birthSystem: formData.birthSystem,
          birthPlace: formData.birthPlace,
          currentYear: formData.currentYear
        };
        
        this.isLoading = false;
      }, 1500);
    }
  }
};
</script>